---
import Logo from "./Logo.astro";
import { headerLinks } from "../config.js";
import { Moon, Menu, Sun, X } from "lucide-astro";

const pathname = Astro.url.pathname;
const docLinks = Astro.props.docLinks;
---

<header
  class="w-full border-b border-b-border sticky top-0 bg-background z-40 block h-12"
>
  <div class="flex flex-row h-full px-2 py-2 mx-auto max-w-screen-xl">
    <a href="/" class="mx-1.5">
      <span class="sr-only">Ferron logo</span>
      <Logo width={105} height={35} class="inline h-8 w-auto" />
    </a>
    <nav class="grow text-sm">
      <ul class="hidden md:flex h-full mx-2.5 list-none">
        {
          headerLinks.nav.map((navLink) => (
            <li class="flex">
              <a
                href={navLink.href}
                target={navLink.target}
                class={`inline-block self-center ${pathname == navLink.href || (navLink.href != "/" && pathname.indexOf(navLink.href + "/") == 0) ? "bg-accent" : ""} text-inherit px-2 py-1.5 mx-1 rounded-sm hover:bg-accent/60 transition-colors`}
              >
                {navLink.label}
              </a>
            </li>
          ))
        }
      </ul>
    </nav>
    <span class="self-center whitespace-nowrap">
      <a
        href={headerLinks.matrix.href}
        target={headerLinks.matrix.target}
        class="hidden md:inline-block align-middle h-8 w-8 mx-0.5 p-1 bg-inherit text-inherit hover:bg-accent/60 rounded-md transition-colors"
      >
        <span class="sr-only">Matrix</span>
        <svg viewBox="0 0 27.9 32" class="align-top w-6 h-6">
          <g fill="currentColor">
            <path
              d="M27.005 31.205V.705h-2.19v-.732h3.04v32h-3.04v-.732zM8.135 10.405v1.54h.044a4.486 4.486 0 0 1 1.49-1.37c.58-.323 1.25-.485 1.99-.485.72 0 1.38.14 1.97.42.595.279 1.05.771 1.36 1.48.338-.5.796-.941 1.38-1.32.58-.383 1.27-.574 2.06-.574.602 0 1.16.074 1.67.22.514.148.954.383 1.32.707.366.323.653.746.859 1.27.205.522.308 1.15.308 1.89v7.63h-3.13v-6.46c0-.383-.015-.743-.044-1.08a2.302 2.302 0 0 0-.242-.882 1.47 1.47 0 0 0-.584-.596c-.257-.146-.606-.22-1.05-.22-.44 0-.796.085-1.07.253-.272.17-.485.39-.639.662a2.649 2.649 0 0 0-.308.927 7.075 7.075 0 0 0-.078 1.05v6.35h-3.13v-6.4c0-.338-.007-.673-.021-1a2.826 2.826 0 0 0-.188-.916 1.408 1.408 0 0 0-.55-.673c-.258-.168-.636-.253-1.14-.253a2.334 2.334 0 0 0-.584.1 1.95 1.95 0 0 0-.705.374c-.228.184-.422.449-.584.794-.161.346-.242.798-.242 1.36v6.62h-3.13v-11.4zM.841.737v30.5h2.19v.732h-3.04v-32h3.03v.732z"
            ></path>
          </g>
        </svg>
      </a><a
        href={headerLinks.github.href}
        target={headerLinks.github.target}
        class="hidden md:inline-block align-middle h-8 w-8 mx-0.5 p-1 bg-inherit text-inherit hover:bg-accent/60 rounded-md transition-colors"
      >
        <span class="sr-only">GitHub</span>

        <svg
          width={25}
          height={25}
          viewBox="0 0 98 96"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          class="align-top"
          ><path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
            fill="currentColor"></path></svg
        >
      </a><button
        data-theme-selector
        class="inline-block align-middle h-8 w-8 mx-0.5 p-1 bg-inherit text-inherit hover:bg-accent/60 rounded-md transition-colors cursor-pointer"
      >
        <span class="sr-only">Toggle theme</span>
        <Moon width={25} height={25} class="hidden dark:inline align-top" />
        <Sun width={25} height={25} class="inline dark:hidden align-top" />
      </button><button
        data-header-menu-toggle
        class="inline-block md:hidden align-middle h-8 w-8 mx-0.5 p-1 bg-inherit text-inherit hover:bg-accent/60 rounded-md transition-colors"
      >
        <span class="sr-only">Toggle menu</span>
        <Menu width={25} height={25} />
      </button>
    </span>
  </div>
  <nav
    data-header-menu
    class="block md:hidden bg-background w-full h-full p-2 overflow-auto z-50 fixed top-0 left-full transition-[left] shrink-0 duration-1000"
  >
    <div class="flex flex-row">
      <div class="grow mx-1.5">
        <Logo
          width={105}
          height={35}
          className="inline h-8 w-auto self-center"
        />
      </div>
      <button data-header-menu-close class="inline-block md:hidden self-center">
        <span class="sr-only">Close</span>
        <X
          class="inline-block w-8 h-8 py-1 rounded-sm bg-background text-foreground hover:bg-accent/60 hover:text-accent-foreground transition-colors"
        />
      </button>
    </div>
    <ul
      class={`flex ${docLinks ? "flex-row overflow-x-auto" : "flex-col"} my-3 list-none`}
    >
      {
        headerLinks.nav.map((navLink) => (
          <li class={`${docLinks ? "inline" : "block my-1 text-center"}`}>
            <a
              href={navLink.href}
              target={navLink.target}
              class={`inline-block align-middle ${pathname == navLink.href || (navLink.href != "/" && pathname.indexOf(navLink.href + "/") == 0) ? "bg-accent" : ""} text-inherit px-2 py-1 mx-1 rounded-sm hover:bg-accent/60 transition-colors`}
            >
              {navLink.label}
            </a>
          </li>
        ))
      }
      <li
        class={`${Astro.props.docLinks ? "inline" : "block my-1 text-center"}`}
      >
        <a
          href={headerLinks.github.href}
          target={headerLinks.github.target}
          class="whitespace-nowrap inline-block align-middle text-inherit px-2 py-1 h-8 mx-1 rounded-sm hover:bg-accent/60 transition-colors"
        >
          <svg
            width={25}
            height={25}
            viewBox="0 0 98 96"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            class="inline mr-2 align-top"
            ><path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
              fill="currentColor"></path></svg
          >
          <span class="align-middle">GitHub</span>
        </a>
      </li>
      <li
        class={`${Astro.props.docLinks ? "inline" : "block my-1 text-center"}`}
      >
        <a
          href={headerLinks.matrix.href}
          target={headerLinks.matrix.target}
          class="whitespace-nowrap inline-block align-middle text-inherit px-2 py-1 h-8 mx-1 rounded-sm hover:bg-accent/60 transition-colors"
        >
          <svg viewBox="0 0 27.9 32" class="inline mr-2 align-top w-6 h-6">
            <g fill="currentColor">
              <path
                d="M27.005 31.205V.705h-2.19v-.732h3.04v32h-3.04v-.732zM8.135 10.405v1.54h.044a4.486 4.486 0 0 1 1.49-1.37c.58-.323 1.25-.485 1.99-.485.72 0 1.38.14 1.97.42.595.279 1.05.771 1.36 1.48.338-.5.796-.941 1.38-1.32.58-.383 1.27-.574 2.06-.574.602 0 1.16.074 1.67.22.514.148.954.383 1.32.707.366.323.653.746.859 1.27.205.522.308 1.15.308 1.89v7.63h-3.13v-6.46c0-.383-.015-.743-.044-1.08a2.302 2.302 0 0 0-.242-.882 1.47 1.47 0 0 0-.584-.596c-.257-.146-.606-.22-1.05-.22-.44 0-.796.085-1.07.253-.272.17-.485.39-.639.662a2.649 2.649 0 0 0-.308.927 7.075 7.075 0 0 0-.078 1.05v6.35h-3.13v-6.4c0-.338-.007-.673-.021-1a2.826 2.826 0 0 0-.188-.916 1.408 1.408 0 0 0-.55-.673c-.258-.168-.636-.253-1.14-.253a2.334 2.334 0 0 0-.584.1 1.95 1.95 0 0 0-.705.374c-.228.184-.422.449-.584.794-.161.346-.242.798-.242 1.36v6.62h-3.13v-11.4zM.841.737v30.5h2.19v.732h-3.04v-32h3.03v.732z"
              ></path>
            </g>
          </svg>
          <span class="align-middle">Matrix</span>
        </a>
      </li>
    </ul>
    {
      docLinks ? (
        <ul class={`flex flex-col my-3 list-none`}>
          {docLinks.map(
            (docLink: {
              href: string;
              target: string;
              sub: boolean;
              label: string;
            }) => (
              <li class="block my-1">
                <a
                  href={docLink.href}
                  target={docLink.target || "_self"}
                  class={`${docLink.sub ? "ml-4" : ""} block align-middle ${pathname == docLink.href ? "bg-accent" : ""} text-inherit px-2 py-1 mx-1 rounded-sm hover:bg-accent/60 transition-colors`}
                >
                  {docLink.label}
                </a>
              </li>
            )
          )}
        </ul>
      ) : (
        ""
      )
    }
  </nav>
</header>

<script>
  const areThemesSupported =
    window.CSS &&
    window.CSS.supports &&
    window.CSS.supports("color", "var(--fake-var)");
  const savedTheme = localStorage.getItem("theme");
  const isSystemDark =
    window.matchMedia &&
    window.matchMedia("(prefers-color-scheme: dark)").matches;
  let initialDarkMode = isSystemDark;
  if (savedTheme == "dark") {
    initialDarkMode = true;
  } else if (savedTheme == "light") {
    initialDarkMode = false;
  }
  let isDarkMode = initialDarkMode;

  function updateTheme() {
    document.documentElement.classList.add("disable-css-transitions");
    if (isDarkMode) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
    document.documentElement.offsetHeight; // Flush all the CSS changes
    document.documentElement.classList.remove("disable-css-transitions");
  }

  function initializeHeader() {
    let themeSelector = document.querySelector("[data-theme-selector]");
    if (themeSelector) {
      themeSelector.addEventListener("click", (e) => {
        e.preventDefault();
        if (!areThemesSupported) throw new Error("Themes are not supported");
        localStorage.setItem("theme", isDarkMode ? "light" : "dark");
        isDarkMode = !isDarkMode;
        updateTheme();
      });
    }

    updateTheme();

    let menuButton = document.querySelector("[data-header-menu-toggle]");
    let menuClose = document.querySelector("[data-header-menu-close]");
    let menu = document.querySelector("[data-header-menu]");
    if (menuButton) {
      menuButton.addEventListener("click", (e) => {
        e.preventDefault();
        if (menu) {
          menu.classList.replace("left-full", "left-0");
        }
      });
    }
    if (menuClose) {
      menuClose.addEventListener("click", (e) => {
        e.preventDefault();
        if (menu) {
          menu.classList.replace("left-0", "left-full");
        }
      });
    }
  }

  document.addEventListener("astro:after-swap", initializeHeader);

  initializeHeader();
</script>
